        // 提交景点信息
        document.getElementById("submit").addEventListener("click",(event) =>{

           let number = document.getElementById("number").value ;

           let name =  document.getElementById("name").value;

          let introduction =  document.getElementById("introduction").value;

            if(number === ""){
                alert("请输入景点的编号")
                return ;
            }

            if(name === ""){
                alert("请输入景点的名称");
                return ;
            }

            if(introduction === ""){
                alert("请输入景点的介绍信息")
                return ;
            }

            // 将字符转为10进制数字
             number = parseInt(number);

            console.log( typeof number)
    
            if (number < 0) {

            alert("存入的景点编号不能是负数");
            return ;
        }

        if(number >= 500){
            alert("输入的景点编号过大，请重新输入")
            return ;
        }

          let res =  CHART.saveAttractions(number ,name,introduction);


          if(res === 1){

            alert("存入景点成功")

            View.showData();

          }else if( res === 0 ){

            alert("该编号的景点已经存在")

            if(confirm("是否覆盖该编号景点？")){  

                CHART.updateAttractions(number ,name,introduction);

                alert("存入景点成功");  

                View.showData();

            }else{  

                alert("已退出");  
            }  

          }else if(res === -1 ){

            alert("景点名称已经存入");

          }

            console.log(CHART.arr);

            

        })

     document.getElementsByClassName("nav")[0].addEventListener('click',function(e){

        console.log(e.target.id)

        if(e.target.id === ""){
            return ;
        }

        // 进行视图的切换
        View.toggleFunction(View.map[e.target.id]);

        // 当切换到景点输入路径的视图时候进行处理

        if(e.target.id === "insertPath"){

         View.setselect("select1" , "select2")

    }

        if(e.target.id === "serchPath"){

            View.setselect("select3","select4");

    }

         e.preventDefault()

    })
        // 景点查询
        document.getElementsByClassName("search")[0].addEventListener('click',()=>{

            let searchAattractions = document.getElementById("searchAattractions").value;

            document.getElementById("list").innerHTML ="";

            document.getElementById("showContent").style.top = "300px";

            console.log(searchAattractions);


            if( !isNaN(searchAattractions) ){

                searchAattractions = parseInt(searchAattractions ) ;
            }

            // 获得查询的结果
             let res = CHART.getAttractions(searchAattractions);

             console.log(res);

             if(res === null){

                document.getElementById("showData").innerHTML = `

                <p style = "margin-top : 20px">未找到相关的景点信息</p>
                
                `

                return ;

             }

             document.getElementById("showData").innerHTML = `

             <h1 style="margin-top: 20px;margin-bottom : 20px;">${res.name}</h1>
                    <h3>简介</h3>
              <div style="margin-bottom: 20px;margin-top: 20px;">${res.Introduction}</div>
             
             `

        })

        let time = null ;

        function setText(text){
            console.log(text)
            document.getElementById("searchAattractions").value = text
        }

        // 进行景点的模糊查询，节流防抖
        document.getElementById("searchAattractions").addEventListener("input",()=>{

          //  console.log("输入事件被触发");

            clearTimeout(time);

           time = setTimeout(()=>{

            let input = document.getElementById("searchAattractions");

                let searchAattractions = input.value;

                let list = document.getElementById("list");

                if(searchAattractions === ""){

                    list.innerHTML = "";

                    document.getElementById("showContent").style.top =  300 + 'px';

                    View.showData();

                    return ;

                }

            let data =  CHART.getAllAttractions();

            console.log(data)

            let res = [];
            
           
            for(let i = 0 ;  i < data.length ; i++){

                if(data[i].name.indexOf(searchAattractions) != -1){

                    res.push(data[i]);
                }

            }

            let html = ``;

           if(res.length === 0){

            html =`<div style="border-radius: 20px;  background-color: #fbfcfd; padding-top:20px;padding-bottom:20px;"> 没找到相关的景点信息
            </div>`


            document.getElementById("showContent").style.top = 40 + 36 + 300 + 'px';

           }else{

            let count = 0 ;

            html += `<div style="border-radius: 20px;  background-color: #fbfcfd; padding-top:20px;padding-bottom:20px;">`;

            for(let i = 0 ; i < 10 ; i++){

                if(res[i] !== undefined){

                    count++ ;

                html += `<p  class="list_li" onclick="setText(this.innerText);">${res[i].name}</p>`

                }

            } 


             document.getElementById("showContent").style.top =  count * 36 + 300 + 40 + 'px' ;

           }

           html += "</div>";
     

            list.innerHTML = html ;

            },800);

            
        })


      /*   document.getElementById("searchAattractions").addEventListener("blur",(e)=>{

            let searchAattractions = document.getElementById("searchAattractions").value;

            if(searchAattractions.length === 0){
                View.showData();
            }

        }) */


        // 景点删除
        document.getElementsByClassName("delete")[0].addEventListener('click',(e)=>{

            let deleteAattractions  = document.getElementById("deleteAattractions").value

            if(  !isNaN(deleteAattractions) ){

                deleteAattractions = parseInt(deleteAattractions) ;
            }

            console.log(typeof deleteAattractions);

            let res = CHART.deleteAttractions(deleteAattractions);

            console.log(CHART.arr);

            if(res === false){
                alert("要删除的节点不存在");
            }else{
                alert("景点信息删除成功");
                View.showData();
            }

        })

        // 景点路径输入
        document.getElementById("submitAction").addEventListener('click',(e)=>{

            // 获取 select1  和 select2 的 value ，对应的就是所选的景点的位置信息

            let select1 = document.getElementById("input1");
            
            let select1Value = CHART.attractionNameToSubscript(select1.value) ;

            let select2 = document.getElementById("input2");
            
            let select2Value = CHART.attractionNameToSubscript(select2.value) ;


            console.log(select1Value);

            console.log(select2Value);

           // let select1Value = select1.options[index1].value ;

          //  let select2Value = select2.options[index2].value ;

            if(select1Value === select2Value){

                alert("所选的景点不能一样");

                return ;
            }

            // 获取2个景点之间的路径长度
            let path = document.getElementById("Path").value

            if(path === ""){
                alert("请输入景点之间的路径")
                return ;
            }

            console.log(path);

            // 将 path 从字符串转化为数字 
            path = parseInt(path);

            if(path === 0){
                alert("不同景点之间的距离不能是 0")
                return ;
            }

            // 将值转化为数字
            select1Value = parseInt(select1Value);

            select2Value = parseInt(select2Value);

            CHART.saveAttractionsContact(select1Value,select2Value,path);

            alert("景点信息添加成功")

        })

        // 景点路径查询
        document.getElementById("searchAction").addEventListener('click',()=>{

            // 根据景点的名称获取景点对应的下标

            let select1 = document.getElementById("input3");
            
            let select1Value = CHART.attractionNameToSubscript(select1.value) ;

            let select2 = document.getElementById("input4");
            
            let select2Value = CHART.attractionNameToSubscript(select2.value) ;

            if(select1Value === select2Value){

                alert("所选的景点不能一样");

                return ;
            }

             // 将值转化为数字
            select1Value = parseInt(select1Value);

            select2Value = parseInt(select2Value);

            let res = CHART.getShortestPath(select1Value,select2Value);

            console.log(res);

            // 将数据渲染到 getData的节点上

            let getData = document.getElementById("getData")


            if (res === null) {
                
                getData.innerHTML = `
                
                <div style="margin-bottom: 20px;">
                <h3> ${select1.value}  和 ${select2.value} 之间路径不通哦~~ </h3>
                </div>

                `

                return;
            }


            let resArr = CHART.getAllContactPath(select1Value,select2Value);

            if(resArr.length == 1) resArr = [] ;

            resArr.sort((a,b)=>{ return a.totalPath - b.totalPath })

            resArr.shift();

           resArr.unshift(res);

           console.log(resArr)


        let html = `<div class="table" >`;

            for(let i = 0 ; i < resArr.length ; i++){

                html = html + `
            
                <div class="celi">
    
             <div style="font-weight: 800; color:#333333 ; display:flex; justify-content: space-around; align-items: center;"> 
             方案<h2 style="color:#00b5ad!important">${i+1}</h2>  
             </div>

             <div style="display:flex; justify-content: space-around; align-items: center;"> 总路径 <h2 style="color:#aab5ad!important">${resArr[i].totalPath }</h2>米</div>
    
              <a class="down"> <img src="./image/down.png" style="width:20px;height:20px ; cursor: pointer;"></a>
    
            </div>
    
            <div class="box" style=" transition: max-height 600ms; overflow: hidden; ">
    
            <h3 style="margin-top: 10px; margin-bottom: 10px;"> 景点路线 </h3>  `
    
             for(let j = 0 ; j < resArr[i].pathLength.length ; j++){
    
            html += `<p style="margin-top: 5px;margin-bottom: 5px;"> ${resArr[i].pathName[j]}  -> ${resArr[i].pathName[j+1]}  &nbsp&nbsp&nbsp  ${resArr[i].pathLength[j]} 米</p> `
    
             }

             html += `</div>`

          }   

      html = html + `</div>  `

      getData.innerHTML = html ; 

      let down = document.getElementsByClassName('down');


      for(let i = 0 ; i < down.length ; i++){


        down[i].addEventListener('click', () =>{

          View.accordion("box",i)

      });

      }
  

      })  
 

setInterval(()=>{

    View.changeBackground(document.getElementsByTagName('body')[0]) 

},5000);
    
     
